<template>
  <CommonLayout default-active-menu="/pending-interviews">
    <div class="pending-interviews">
      <div class="page-header">
        <h2 class="page-title">待面试列表</h2>
        <el-button type="primary" @click="addInterview">
          <el-icon><Plus /></el-icon>添加面试
        </el-button>
      </div>
      
      <!-- 筛选栏 -->
      <el-card class="filter-card">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="面试时间">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="面试职位">
            <el-select v-model="filterForm.position" placeholder="请选择职位" clearable>
              <el-option label="前端开发" value="frontend" />
              <el-option label="后端开发" value="backend" />
              <el-option label="全栈开发" value="fullstack" />
              <el-option label="产品经理" value="pm" />
              <el-option label="UI设计师" value="ui" />
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input v-model="filterForm.company" placeholder="请输入公司名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">筛选</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 面试列表 -->
      <el-table
        v-loading="loading"
        :data="interviewList"
        style="width: 100%"
        :default-sort="{ prop: 'date_range', order: 'ascending' }"
      >
        <el-table-column prop="date_range" label="面试日期" sortable width="180" />
        <el-table-column prop="job_title" label="面试职位" width="160" />
        <el-table-column prop="name" label="公司名称" />
        <el-table-column prop="location" label="公司地址" />
        <!-- <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="remainingDays" label="剩余天数" width="100">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.remainingDays <= 3">{{ scope.row.remainingDays }}天</el-tag>
            <span v-else>{{ scope.row.remainingDays }}天</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="viewDetail(scope.row.id)">查看</el-button>
            <el-button size="small" type="primary" @click="enterInterviewRoom(scope.row.id)">进入面试间</el-button>
            <!-- <el-button size="small" type="danger" @click="cancelInterview(scope.row.id)">取消</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </CommonLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import CommonLayout from '@/components/CommonLayout.vue';
import { getInterviewList } from '@/api/interView';
import type { InterViewParams } from '@/api/interView';

const queryParams = reactive<InterViewParams>({
  user_id: 1,
  page: 1,
  page_size: 10
})

const router = useRouter();
const loading = ref(false);

// 分页相关
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  position: '',
  company: ''
});

// 模拟的待面试列表数据
const interviewList = ref();

// 获取状态对应的样式
const getStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'warning';
    case 'completed': return 'success';
    case 'cancelled': return 'danger';
    default: return 'info';
  }
};

// 获取状态对应的文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待面试';
    case 'completed': return '已完成';
    case 'cancelled': return '已取消';
    default: return '未知';
  }
};

// 处理筛选
const handleFilter = () => {
  loading.value = true;
  // 模拟请求
  setTimeout(() => {
    loading.value = false;
    // 这里应该是实际的筛选逻辑
    ElMessage.success('筛选成功');
  }, 500);
};

// 重置筛选
const resetFilter = () => {
  filterForm.dateRange = [];
  filterForm.position = '';
  filterForm.company = '';
  handleFilter();
};

// 添加面试
const addInterview = () => {
  router.push('/add-interview');
};

// 查看面试详情
const viewDetail = (id: number) => {
  router.push(`/interview-detail/${id}`);
};

// 进入面试间
const enterInterviewRoom = (id: number) => {
  router.push(`/interview-room-new/${id}`);
};

// 取消面试
const cancelInterview = (id: number) => {
  ElMessageBox.confirm(
    '您确定要取消这场面试吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 实际应用中这里会发送请求取消面试
    ElMessage({
      type: 'success',
      message: '面试已取消',
    });
    // 更新本地状态
    const interview = interviewList.value.find(item => item.id === id);
    if (interview) {
      interview.status = 'cancelled';
    }
  }).catch(() => {
    // 用户取消操作
  });
};

// 分页大小变化
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  // 获取数据
};

// 页码变化
const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  // 获取数据
};

onMounted( async() => {
  // 获取面试列表
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    // 实际应用中这里应该是API调用
  }, 500);

  const response = await getInterviewList(queryParams);
  interviewList.value = response.results;
  total.value = response.count;
  console.log(response);
});
</script>

<style scoped>
.pending-interviews {
  padding-bottom: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.filter-card {
  margin-bottom: 20px;
  width: 100%;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 让表格占据剩余空间 */
.el-table {
  flex: 1;
  min-height: 0; /* 解决flex子元素无法收缩的问题 */
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 媒体查询适配不同屏幕尺寸 */
@media screen and (max-width: 768px) {
  .filter-form .el-form-item {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }
  
  .filter-form .el-date-editor.el-input,
  .filter-form .el-date-editor.el-input__inner,
  .filter-form .el-select {
    width: 100%;
  }
}
</style> 